<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天天商城-首页</title>
    <!--bootstrap-->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="js/HttpUtil.js"></script>
    <script src="js/HZHHttpUtil.js"></script>
    <script src="js/CacheUtil.js"></script>
</head>
<body>
<!--页眉-->
<div  id="header"></div>
<!--商品列表-->
<div class="container col-xs-12 " >
    <ul id="li_productType_list" class="nav nav-pills col-xs-offset-3"></ul>
</div>
<!--商品展示-->
<div class="container " data-currentPage="1" data-currentType="家用电器" data-maxPage="" id="productPage">
    <div class="row" id="div_product_list">

    </div>

<!--分页 start-->
    <div style="text-align: center">

    <nav aria-label="Page navigation">
        <button id="prev" class="pagination " style="width: 30px " onclick="prev()">
                <span aria-hidden="true">&laquo;</span>
        </button>
        <ul class="pagination" id="pageIndex" style="margin: 0">
<!--            分页页面位置-->
        </ul>
        <button id="next" class="pagination" style="width: 30px" onclick="next()">
                <span aria-hidden="true">&raquo;</span>
        </button>
    </nav>
    </div>
    <!--分页 end-->
</div>


<!--分页模板-->
<template id="template_page">
    <li onclick="currentPage(this)"><a href="#">{pageIndex}</a></li>
</template>


<!--商品模板-->
<template id="template_product">
    <div class="col-xs-3 ">
        <div class="thumbnail" style="width: 220px;height: 380px">
            <img src="{picture}"  alt="...">
            <div class="caption">
                <h3 ><a href="/shop-app/productDetail.html?id={id}">{name}</a></h3>
                <p>商品介绍：{info}</p>

            </div>
        </div>
    </div>
</template>


<!--商品种类模板-->
<template id="template_productType">
    <li role="presentation" name="productTypeName" onclick="showProductByType(this)" id="show"><a href="#">{name}</a></li>
</template>

<!--页脚-->



<script>
    var pageNum=4;//一页显示商品条数
    $(function () {
        loadProductType();
        loadProduct("家用电器",1);
        loadPaging("家用电器");
    })

    function showProductByType(e) {
        let text = $(e).text();
        console.log(text);
        $("#productPage").attr("data-currentType",text);
        loadProduct(text,1);
        loadPaging();

    }

    //遍历分页
    function loadPaging() {
        let url = "/product/selectProductCountByTypeName";
        let params={
            typeName:$("#productPage").attr("data-currentType")
        }
        httpGet(url,params,function (data) {
            renderingPageIndex(data);
        })
    }

    function renderingPageIndex(totalCount) {
        //计算得到总页数
        console.log("totalCount:"+totalCount)
        let totalPage=1;
        if(totalCount%pageNum===0){
            totalPage=totalCount / pageNum;
        }else {
            totalPage=totalCount / pageNum+ 1;
            totalPage=parseInt(totalPage);
        }
        console.log("totalPage:"+totalPage);
        $("#productPage").attr("data-maxPage",totalPage)
        //遍历商品分页索引
        let templatePageHtml = $("#template_page").html();
        let PageHtml = "";
        let tempPageHtml;
        for (let index = 1; index <= totalPage; index++) {
            tempPageHtml=templatePageHtml.replace(/{pageIndex}/g,index);
            PageHtml+=tempPageHtml;
        }
        console.log(PageHtml)
        $("#pageIndex").html(PageHtml);
    }





    //商品分页处理
    function currentPage(e) {
        let pageIndex = $(e).text();
        $("#productPage").attr("data-currentPage",pageIndex);
        let typeName = $("#productPage").attr("data-currentType");
        loadProduct(typeName,pageIndex);
    }

    function prev() {
        let pageIndex= $("#productPage").attr("data-currentPage");
        //判断当前页面是否大于1
        if(pageIndex>1){
            pageIndex--;
            $("#productPage").attr("data-currentPage",pageIndex)
        }
        let typeName = $("#productPage").attr("data-currentType");
        loadProduct(typeName,pageIndex);
    }

    function next() {
        let maxPage = $("#productPage").attr("data-maxPage");
        let pageIndex= $("#productPage").attr("data-currentPage");
        //判断当前页面是否小于最大页面数量
        if(pageIndex<maxPage){
            pageIndex++;
            $("#productPage").attr("data-currentPage",pageIndex)
        }
        let typeName = $("#productPage").attr("data-currentType");
        loadProduct(typeName,pageIndex);
    }






    //ajax 请求后台获取商品种类列表数据
    function loadProductType(){
        let url = "/productType/showAllProductType";
        httpPost(url,null,function (data) {
            renderingProductType(data);
        })
    }
    //ajax 请求后台获取商品列表数据
    function loadProduct(typeName,curPage){
        let url = "/product/selectProductUsingPaging";
        let params={
           typeName:typeName,
            curPage:curPage,
            pageNum:pageNum
        }
        // console.log(params);
        httpPost(url,params,function (data) {
            renderingProduct(data);
        })
    }
    //渲染商品种类列表
    function renderingProductType(productTypeList) {
        let templateProductTypeHtml = $("#template_productType").html();
        let productTypeListHtml = "";
        let tempProductTypeHtml;
        //遍历商品种类列表
        $.each(productTypeList,function (index,productType) {
            //后台数据填充到模板
            tempProductTypeHtml=templateProductTypeHtml.replace(/{name}/g, productType.typeName);
            productTypeListHtml+=tempProductTypeHtml;
        });
        $("#li_productType_list").html(productTypeListHtml);

    }
    //渲染商品列表
    function renderingProduct(productList) {
        let templateProductHtml = $("#template_product").html();
        let productListHtml = "";
        let tempProductHtml;
        //遍历商品列表
        $.each(productList,function (index, product) {
            //后台数据填充到模板
            tempProductHtml=templateProductHtml.replace(/{name}/g,product.name)
                .replace(/{info}/g,product.info)
                .replace(/{id}/g,product.productId)
                .replace(/{picture}/g,product.picture)
            productListHtml+=tempProductHtml;
        });
        $("#div_product_list").html(productListHtml);
    }


</script>
















<script>
    $(document).ready(function(){
        $("#header").load("header.html");
    });
</script>

</body>
</html>